<template>
  <div>
    <el-form :model="queryParams" :rules="rules" label-suffix=":">
      <el-form-item label="车牌号" prop="vehicleNo">
        <el-input style="width:220px" v-model="queryParams.vehicleNo"/>
      </el-form-item>
    </el-form>


    <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词"
               :remote-method="remoteMethod" :loading="loading" collapse-tags>
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    let checkVehicleNo = (rule, value, callback) => {
      console.log(value)
      let reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{1}[A-Z]{1}-?[A-Z0-9]{5,6}$/;

      if (!value) {
        callback(new Error('不能为空'))
      } else if (!reg.test(value)) {
        callback(new Error('车牌号不符合规则'))
      } else {
        callback()
      }
    };
    let checkBook = (rule, value, callback) => {
      if (!value) {
        callback(new Error('不能为空'))
      } else if (value === '100') {
        callback(new Error('error'))
      } else {
        callback()
      }
    }
    return {
      msg: 'this is a book',
      queryParams: {
        vehicleNo: undefined
      },
      rules: {
        vehicleNo: [{validator: checkVehicleNo, trigger: 'change'}],
        book: [{validator: checkBook, trigger: 'change'}],
      },
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: item, label: item };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== '' && query) {
        this.loading = true;
        console.log(this.list)
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  }

}
</script>

<style scoped>

</style>
